<template>
  <view v-if="flag">
    <view class="main">
      <view class="main-color container">
        <view class="title ">
          <text>基础信息</text>
        </view>
        <view class="line head">
          <text>订单号：{{demand.addressKey}}</text>
        </view>
        <view class="line">
          <text style="color: #FF8C00;font-weight: bold;">状态：</text>
          <text style="#0000FF;font-weight: bold;" v-if="demand.status == 1">已发布</text>
          <text style="color: #FF0000;font-weight: bold;" v-if="demand.status == 2">失败</text>
          <text style="color: #FF00FF;font-weight: bold;" v-if="demand.status == 3">进行中</text>
          <text style="color: #FF8C00;font-weight: bold;" v-if="demand.status == 4">已完成</text>
          <text style="color: #FF8C00;font-weight: bold;" v-if="demand.status == 5">待审核</text>
          <text v-if="demand.status == 6">待支付</text>
        </view>
        <view class="line" style="margin-top: 3%;margin-bottom: 3%;">
          <text style="font-weight: bold;text-align: center;">内容：</text>
          <text class="text-clamp2">{{demand.context}}</text>
        </view>
        <view class="line">
          <text>地址：{{demand.address}}</text>
        </view>
        <view class="line">
          <text>创建时间：{{demand.createTime}}</text>
        </view>
        <view class="line" v-if="demand.status == 2">
          <text style="color: #FF0000;font-weight: bold;">违规信息：{{demand.illegalMsg}}</text>
        </view>
        <view class="line" v-if="demand.status == 4">
          <img style="margin-top: 3%;margin-bottom: 3%;" class="img"  mode="widthFix" :src="demand.finishUrl">
        </view>
        <view class="line">
          <text>基础金额：{{demand.money/10}}</text>
        </view>
        <view class="line">
          <text>加急费：{{demand.emergencyFee/10}}</text>
        </view>
        <view class="line">
          <text style="font-weight: bold;">总金额：{{(demand.money+demand.emergencyFee)/10}}</text>
        </view>
        <view class="line">
          <text>配送方式：{{demand.runType == 0 ? '普通': '加急'}}</text>
        </view>
        <view class="line">
          <text>付费方式：{{demand.payType ==  0 ? '线下' : '线上'}}</text>
        </view>
        <view class="line">
          <text>物品属性：{{demand.tag}}</text>
        </view>
        <view class="line">
          <text>是否改单：{{demand.updateTime == demand.createTime ? '否' : '是'}}</text>
        </view>
      </view>
    </view>
    <view class="main" v-if="demand.status == 4  || demand.status == 3">
      <view class="main-color container">
        <view class="title">
          <text>订单信息</text>
        </view>
        <view class="line head">
          <text>订单号：{{orders.id}}</text>
        </view>
        <view class="line head">
          <text>订单状态：</text>
          <text style="color: red;font-weight: bold;" v-if="orders.status == 1">配送中</text>
          <text style="color: #FF0000;font-weight: bold;" v-if="orders.status == 2">转接单</text>
          <text style="color: #FF00FF;font-weight: bold;" v-if="orders.status == 3">已取消 </text>
          <text style="color: #FF8C00;font-weight: bold;" v-if="orders.status == 4">已完成</text>
        </view>
        <view class="line">
          <text>用户电话：{{orders.userPhone}}</text>
        </view>
        <view class="line">
          <text>订单创建时间：<text style="color: #FF00FF;">{{orders.createTime}}</text></text>
        </view>
        <view class="line">
          <text>预计完成时间：<text style="color: #FF8C00;">{{orders.estimateTime}}</text></text>
        </view>
        <view class="line">
          <text>配送者电话：{{orders.runnerPhone}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-demand-detail",
    data() {
      return {
        orderId: '',
        demandDetail: {},
        demand: {},
        orders: {},
        flag: false,
      };
    },
    onLoad(options) {
      this.orderId = options.orderId;;
      // console.log(this.orderId)
      this.onDetailOrder(this.orderId);
    },
    mounted() {
      
    },
    methods: {
      async onDetailOrder(orderId) {
        // console.log(orderId);

        var query = {
          status: null,
          addressKey: orderId
        }

        const {
          data: result
        } = await uni.$http.post('/api/READ/api/my/demand/query', query);
          
        this.flag = true;
        if (result.code != 200) return uni.$showMsg(result.msg);
        console.log(result)

        var demandDetail = result.data;
        this.demand = demandDetail.demand;
        this.orders = demandDetail.orders;
      }
    }
  }
</script>

<style lang="scss">
  .img {
    display: block;
    width: 250px;
    height: 190px;
  }

  .container {
    padding: 2%;
    border: 1px solid #FFDD55;
  }

  .main-color {}

  .text-clamp2 {
    width: 90%;
    display: inline-block;
    white-space: pre-wrap;
    word-wrap: break-word;
    height: auto;
  }

  .main {
    padding: 5%;
  }

  .head {
    margin-top: 3%;
  }

  .line {
    margin-bottom: 2.5%;
  }

  .title {
    font-size: 40rpx;
    font-weight: bold;
  }
</style>
